<template>
  <div>
    <el-card shadow="hover">
      <el-card shadow="hover">
        <div slot="header" class="clearfix">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-notebook-1
"
            @click="allexamine()"
            >刷新列表</el-button
          >
          <el-button
            type="success"
            icon="el-icon-success"
            size="mini"
            @click="successexamine()"
            >已回复</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-error"
            size="mini"
            @click="failexamine()"
            >已驳回</el-button
          >
          <el-button
            type="info"
            icon="el-icon-loading"
            size="mini"
            @click="examineing()"
          >
            待回复</el-button
          >
        </div>
        提交用户：
        <el-input
          placeholder="用户名"
          v-model="nameinput"
          style="width: 152px"
          size="medium"
          clearable
        >
        </el-input>
        <!-- 时间卡 -->
        提交时间：
        <el-date-picker
          v-model="datevalue"
          size="medium"
          :change="datechange(datevalue)"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
        <!-- 时间卡 -->
        <el-button
          type="primary"
          size="medium"
          @click="timequery()"
          icon="el-icon-search"
        >
          查询</el-button
        >
      </el-card>
      <!-- 表格开始 -->
      <el-card shadow="hover">
        <span style="color: #e4e5e6"> 工单处理表</span>
        <el-table
          ref="multipleTable"
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <!-- 审核状态 -->
          <el-table-column
            align="center"
            width="110"
            prop="status"
            label="处理状态"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span class="p3" v-if="scope.row.status == '0'">
                <i class="el-icon-loading"></i> 待处理</span
              >
              <span class="p1" v-if="scope.row.status == '1'">
                <i class="el-icon-success"></i> 已回复</span
              >
              <span class="p2" v-if="scope.row.status == '2'"
                ><i class="el-icon-error"></i> 已驳回</span
              >
            </template>
          </el-table-column>
          <!-- 审核状态 -->
          <el-table-column prop="createTime" label="提交时间" align="center">
          </el-table-column>
          <el-table-column prop="username" label="提交用户" align="center">
          </el-table-column>
          <el-table-column prop="type" label="工单类型" align="center">
          </el-table-column>
          <el-table-column prop="title" label="工单标题" align="center">
          </el-table-column>

          <el-table-column prop="describes" label="问题描述" align="center">
          </el-table-column>

          <el-table-column label="工单截图" align="center">
            <template slot-scope="scope">
              <div class="rechargeDiv">
                <img
                  :src="scope.row.image"
                  alt=""
                  width="100%"
                  class="rechargeImg"
                  @click="bigRechargeImg(scope.row.image)"
                />
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="receipts" label="回复内容" align="center">
          </el-table-column>
          <!-- 操作 -->
          <el-table-column align="center" label="回复操作">
            <template slot-scope="scope">
              <!-- 通过弹框 -->
              <!-- <el-popconfirm
                confirm-button-text="确认"
                cancel-button-text="取消"
                @onConfirm="successconfirm()"
                @onCancel="successcancel()"
                icon="el-icon-info"
                icon-color="red"
                title="您确定通过吗？"
              > -->
              <el-button
                style="margin-left: 5px; margin-right: 5px"
                size="mini"
                slot="reference"
                type="success"
                icon="el-icon-success"
                @click="handleEdit(scope.$index, scope.row)"
                >回复</el-button
              >
              <!-- </el-popconfirm> -->
              <!-- 通过弹框 -->
              <!-- 驳回 -->
              <el-popconfirm
                confirm-button-text="确认"
                cancel-button-text="取消"
                @onConfirm="failconfirm()"
                @onCancel="failcancel()"
                icon="el-icon-info"
                icon-color="red"
                title="您确定驳回吗？"
              >
                <el-button
                  size="mini"
                  slot="reference"
                  type="danger"
                  icon="el-icon-error"
                  @click="handleDelete(scope.$index, scope.row)"
                  >驳回</el-button
                >
              </el-popconfirm>
              <!-- 驳回 -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格结束 -->

        <!-- 分页查询 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.pageCode"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="this.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.totalCount"
          >
          </el-pagination>
        </div>
        <!-- 分页查询 -->

        <!-- 图⽚预览 -->
        <el-dialog
          title="充值截图预览"
          :visible.sync="imgvisible"
          :close-on-click-modal="false"
          width="50%"
          center
        >
          <img :src="this.previewpic" width="100%" alt="" />
          <span slot="footer" class="dialog-footer">
            <el-button type="danger" @click="imgvisible = false"
              >退出预览</el-button
            >
          </span>
        </el-dialog>
        <!-- 回复工单 -->
        <el-dialog title="回复工单" :visible.sync="dialogVisible" width="30%">
          回复内容：<el-input
            placeholder="请输入回复内容"
            v-model="handleEditreceipts"
            clearable
          >
          </el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="successconfirm()"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import debounce from "lodash.debounce";
// import { getWorkOrder, updateWorkOrder } from "@/api/order";
import { getWorkOrder, updateWorkOrder } from "@/api/titck";

export default {
  async created() {
    let Examine = await getWorkOrder();
    //console.log(Examine.data.pageList);
    this.tableData = Examine.data.pageList;
    this.totalCount = Examine.data.totalCount;
    this.pageCode = Examine.data.pageCode;
    // 要显示时间，在渲染页面之前一直调用该函数，对this.time进行赋值开启定时
    this.timer = setInterval(() => {
      this.nowTime = new Date().toLocaleString();
    });
    ////console.log("1111", this.$store.state.user.role);
  },
  data() {
    return {
      //回复内容
      handleEditreceipts: "",
      dialogVisible: false,
      totalCount: 1,
      pageSize: 10,
      pageCode: 1,
      //通过
      handleEditid: "",
      handleEditstatus: "",
      handleEditreceipts: "",
      //驳回
      handleDeleteid: "",
      handleDeletestatus: "",
      handleDeletereceipts: "",
      //计时器
      timer: undefined,
      nowTime: new Date(),
      //时间
      datevalue: "",
      //当前页码
      currentPage: 1,
      //预览图片
      imgvisible: false,
      status: "",
      nameinput: "",
      typeinput: "",
      previewpic: "",
      tableData: [],
      multipleSelection: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      datevalue: "",
    };
  },

  // 关闭页面销毁定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    //时间查询
    timequery: debounce(async function () {
      let data = {
        username: this.nameinput,
        startTime: this.datevalue[0],
        endTime: this.datevalue[1],
      };
      let Examine = await getWorkOrder(data);
      //console.log(Examine.data.pageList);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
      this.pageCode = Examine.data.pageCode;
    }, 500),
    //时间改变
    datechange(datevalue) {
      // //console.log("时间", datevalue);
      this.datevalue = datevalue;
    },
    //查询状态-刷新状态
    allexamine: debounce(async function () {
      this.status = "";
      let Examine = await getWorkOrder();
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
      this.pageCode = Examine.data.pageCode;
    }, 500),

    //查询状态-已通过
    successexamine: debounce(async function () {
      this.status = 1;
      let data = {
        username: this.nameinput,
        pageSize: this.pageSize,
        pageNum: 1,
        startTime: this.datevalue[0],
        endTime: this.datevalue[1],
        status: this.status,
      };
      let Examine = await getWorkOrder(data);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
      this.pageCode = Examine.data.pageCode;
    }, 500),

    //查询状态-已驳回
    failexamine: debounce(async function () {
      this.status = 2;
      let data = {
        username: this.nameinput,
        pageSize: this.pageSize,
        pageNum: 1,
        startTime: this.datevalue[0],
        endTime: this.datevalue[1],
        status: this.status,
      };
      let Examine = await getWorkOrder(data);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
      this.pageCode = Examine.data.pageCode;
    }, 500),

    //查询状态-待审核
    examineing: debounce(async function () {
      this.status = 0;
      let data = {
        username: this.nameinput,
        pageSize: this.pageSize,
        pageNum: 1,
        startTime: this.datevalue[0],
        endTime: this.datevalue[1],
        status: this.status,
      };
      let Examine = await getWorkOrder(data);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
      this.pageCode = Examine.data.pageCode;
    }, 500),

    //表格分页
    async handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.pageSize = val;
      let data = {
        username: this.nameinput,
        pageSize: this.pageSize,
        pageNum: this.pageCode,
        startTime: this.datevalue[0],
        endTime: this.datevalue[1],
        status: this.status,
      };
      let Examine = await getWorkOrder(data);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
    },
    async handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      //console.log(this.nameinput);
      this.pageCode = val;
      let data = {
        username: this.nameinput,
        pageSize: this.pageSize,
        pageNum: this.pageCode,
        startTime: this.datevalue[0],
        endTime: this.datevalue[1],
        status: this.status,
      };
      let Examine = await getWorkOrder(data);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
    },
    //行内选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //console.log(val);
    },
    //通过
    async handleEdit(index, row) {
      this.dialogVisible = true;
      console.log(index, row);
      this.handleEditid = row.id;
      this.handleEditstatus = row.status;
      this.handleEditreceipts = row.receipts;
    },
    //通过确认
    async successconfirm() {
      if (this.handleEditstatus == 0) {
        //console.log("success确认", this.handleEditid);
        let data = {
          status: 1,
          id: this.handleEditid,
          receipts: this.handleEditreceipts,
        };
        await updateWorkOrder(data);
        this.allexamine();
        this.dialogVisible = false;
      } else {
        this.$message.error("已回复，不可更改");
        this.dialogVisible = false;
      }
    },
    //通过取消
    successcancel() {
      //console.log("success取消", this.handleEditid);
    },
    //驳回
    handleDelete(index, row) {
      //console.log(index, row);
      this.handleDeleteid = row.id;
      this.handleDeletestatus = row.status;
      this.handleDeletereceipts = row.receipts;
    },

    //驳回确认
    async failconfirm() {
      if (this.handleDeletestatus == 0) {
        //console.log("驳回确认", this.handleDeleteid);
        let data = {
          status: 2,
          id: this.handleDeleteid,
        };
        await updateWorkOrder(data);
        this.allexamine();
      } else {
        this.$message.error("已审核，不可更改");
      }
    },
    //驳回取消
    failcancel() {
      //console.log("驳回取消", this.handleDeleteid);
    },
    //预览
    imgaaa(i) {
      //console.log(i);
      this.previewpic = i;
      this.imgvisible = true;
    },
  },
};
</script>
<style>
.p1 {
  display: inline-block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: #85ce61;
  border: 1px solid #e4e5e6;
  border-radius: 20px;
}
.p2 {
  display: inline-block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: #f56c6c;
  border: 1px solid #e4e5e6;
  border-radius: 20px;
}
.p3 {
  display: inline-block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: #666;
  border: 1px solid #e4e5e6;
  border-radius: 20px;
}
</style>